<template>
	<view class="container">
		<live-player
			id="livePlayerContext"
			:src="truePlaySrc"
			mode="live"
			autoplay
			class="video"
			object-fit="fillCrop"
			@statechange="liveStateChange"
			@fullscreenchange="fullscreenchange"
		>
			<cover-view class="logo-border">
				<cover-image :src="logoSrc" class="logo-image"></cover-image>
			</cover-view>
			<cover-view v-if="isFullScreen" class="logo-course-name">
				<cover-view>{{courseName}}</cover-view>
			</cover-view>
			<cover-view class="cover-view" :style="{backgroundColor: theme.primary}" v-if="isError">
				<cover-view>直播课程尚未开始...</cover-view>
				<cover-view class="cover-inner resume" @tap="resume">刷新</cover-view>
				<cover-image src="../../static/img/exitFullScreen.png" class="image-btn" :class="{ 'hidden-btn': !isFullScreen }" @tap="exitFullScreen"></cover-image>
				<cover-image src="../../static/img/fullScreen.png" class="image-btn" :class="{ 'hidden-btn': isFullScreen }" @tap="fullScreen"></cover-image>
			</cover-view>
			<cover-view class="cover-view" :style="{backgroundColor: theme.primary}" v-if="isWaiting">
				<cover-view class="loading-text">加载中</cover-view>
				<cover-image src="../../static/img/exitFullScreen.png" class="image-btn" :class="{ 'hidden-btn': !isFullScreen }" @tap="exitFullScreen"></cover-image>
				<cover-image src="../../static/img/fullScreen.png" class="image-btn" :class="{ 'hidden-btn': isFullScreen }" @tap="fullScreen"></cover-image>
			</cover-view>
			<cover-image src="../../static/img/exitFullScreen.png" class="image-btn" :class="{ 'hidden-btn': !isFullScreen }" @tap="exitFullScreen"></cover-image>
			<cover-image src="../../static/img/fullScreen.png" class="image-btn" :class="{ 'hidden-btn': isFullScreen }" @tap="fullScreen"></cover-image>
		</live-player>
	</view>
</template>

<script>
export default {
	data() {
		return {
			theme: this.$theme,
			Id: '',
			//播放器
			livePlayer: null,
			//logo
			logoSrc: '',
			//播放地址
			truePlaySrc: '',
			//课程名
			courseName: '',
			//错误标记
			isError: false,
			//等待标记
			isWaiting: true,
			//全屏标记
			isFullScreen: false
		}
	},
	onLoad(e) {
		this.Id = e.Id
		this.livePlayer = wx.createLivePlayerContext('livePlayerContext');
		this.getLivePlayerInfo()
	},
	methods: {
		//直播数据初期化
		getLivePlayerInfo() {
			this.$http.request({
				url: 'api/OpenLive/GetLivePlayerInfo',
				data: {
					Id: this.Id
				}
			}).then(res => {
				this.logoSrc = res.channelLogo
				this.truePlaySrc = res.livePlayUrl;
				this.courseName = `${res.openLiveName}-${res.teacherName}`;
				uni.setNavigationBarTitle({
					title: this.courseName
				})
			}).catch(err => {
				this.isError = true
			})
		},
		//直播状态变更
		liveStateChange(e) {
			if (e.detail.code == '-2301'||e.detail.code=='-2302') {
				this.isError = true
				this.isWaiting = false
				uni.hideLoading()
			} else {
				if (e.detail.code == '2003') {
					this.isWaiting = false
					this.isError = false
					uni.hideLoading()
				}
			}
		},
		//全屏
		fullScreen() {
			this.livePlayer.requestFullScreen({ direction: 90 })
			this.isFullScreen = true
		},
		//推出全弄
		exitFullScreen() {
			this.livePlayer.exitFullScreen({ direction: 90 })
			this.isFullScreen = false
		},
		//刷新
		resume() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			})
			this.livePlayer.play()
		},
		//全屏状态变更
		fullscreenchange(e){
			if(e.detail.fullScreen){
				this.isFullScreen = true
			}else{
				this.isFullScreen = false
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	height: 100vh;
	background-color: #151515;
	display: flex;
	justify-content: center;
	align-items: center;
}
.video {
	width: 100%;
}

.logo-border{
	position: absolute;
	top: 5rpx;
	left: 5rpx;
	z-index: 999;
	.logo-image{
		width: 200rpx;
	}
}
.logo-course-name{
	position: absolute;
	top: 10rpx;
	right: 20rpx;
	font-size: 28rpx;
	color: #e1e1e1;
	z-index: 999;
}
.cover-view {
	width: 100%;
	height: 100%;
	color: #f8f8f8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	.cover-inner {
		display: flex;
		align-items: center;
		padding: 5px 10px;
		margin-top: 10px;
		&.resume {
			display: inline-block;
			width: 80rpx;
			background: #4cd964;
			color: #f1f1f1;
			border-radius: 5px;
		}
	}
	.loading-text{
		width: 150rpx;
		position: relative;
	}
	.loading-text::after{
		content: "";
		position: absolute;
		bottom: 0;
		left: 80%;
		animation: loading 3s linear infinite;
	}
	@keyframes loading{
		0%{content: "";}
		33%{content: ".";}
		66%{content: "..";}
		100%{content: "...";}
	}
}

.hidden-btn{
	display: none;
}
.image-btn{
	position: absolute;
	right: 50rpx;
	bottom: 50rpx;
	width: 50rpx;
	height: 50rpx;
}
</style>
